{% load staticfiles %}
<!doctype html>
<html lang="zh-CN">
<head>
    <!-- 必须的 meta 标签 -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="{% static 'css/reset.css' %}">
    <link href="{% static 'css/bootstrap.min.css' %}">
    <link rel="stylesheet" href="{% static 'css/daterangepicker.css' %}">
</head>
<body>
    <form method="post" action="{% url 'store:choice_date' %}">
        {% csrf_token %}
        <label for="date">日期：</label>
        <input id="date" name="date" required="required" style="display:inline-block;width: 220px;"/>
        <input type="hidden" id="startTime" name="startTime"/>
        <input type="hidden" id="endTime" name="endTime"/>
        <button type="submit">提交</button>
    </form>

    {{ line | safe}}

    <script src="{% static 'js/jquery3.2.1.js' %}"></script>
    <script src="{% static 'js/moment.js' %}"></script>
    <script src="{% static 'js/daterangepicker.js' %}"></script>
    <script>
        $(function () {
            //区间时间插件
            $("input[name='date']").daterangepicker(
                {
                    // autoApply: true,
                    autoUpdateInput: false,
                    alwaysShowCalendars: true,
                    ranges: {
                        '今天': [moment(), moment()],
                        '昨天': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                        '近7天': [moment().subtract(7, 'days'), moment()],
                        '这个月': [moment().startOf('month'), moment().endOf('month')],
                        '上个月': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
                    },
                    locale: {
                        format: "YYYY/MM/DD HH:MM:SS",
                        separator: " - ",
                        applyLabel: "确认",
                        cancelLabel: "清空",
                        fromLabel: "开始时间",
                        toLabel: "结束时间",
                        customRangeLabel: "自定义",
                        daysOfWeek: ["日", "一", "二", "三", "四", "五", "六"],
                        monthNames: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"]
                    }
                }
            ).on('cancel.daterangepicker', function (ev, picker) {
                $("#date").val("请选择日期范围");
                $("#startTime").val("");
                $("#endTime").val("");
            }).on('apply.daterangepicker', function (ev, picker) {
                $("#startTime").val(picker.startDate.format('YYYY-MM-DD'));
                $("#endTime").val(picker.endDate.format('YYYY-MM-DD'));
                $("#date").val(picker.startDate.format('YYYY-MM-DD') + " 至 " + picker.endDate.format('YYYY-MM-DD'));
            });

        });
    </script>
</body>
</html>